<template>
	<view class="test">
		<view class="btn_h">
			<u-button class="bb" text="车辆" :type="Car_Map[0]" @click="Borrow_a_car"></u-button>
			<u-button class="bb" text="还车点" :type="Car_Map[1]" @click="Return_the_car"></u-button>
		</view>
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<view class="noti">
		  <u-notice-bar :bgColor="bgColor" :text="text1"></u-notice-bar>
		</view>
	</view>
	<Card_M class="index-scan-main">
		<view class="index-main">
			<view class="Scan-Code" @click="scan">
				<text>扫码骑行</text>
				<image src="../../static/scan-code-1.png" mode=""></image>
			</view>
			<view class="input-Code" @click="input">
				<text>编号解锁</text>
				<image src="../../static/input-code.png" mode=""></image>
			</view>
			<view class="index-wap">
				<text class="Billing-rules">计费规则</text>
				<text class="View-parking-points">查看停车点</text>
				<text class="Riding-instructions">骑行须知</text>
				<text class="Book-a-car-appointment">预约用车</text>
			</view>
		</view>
	</Card_M>

</template>

<script>
import Card_M from "./compent/card.vue"
export default {
	data() {
		return {

			scan_with: '',
			bgColor: "",
			text1: '合法合规骑车，注意行车安全',
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			latitude: 22.640509,
			longitude: 110.160872,
			covers: [{
			latitude: 22.640509,
			longitude: 110.160872,
				iconPath: '../../../static/location.png'
			}, {
				latitude: 22.640509,
				longitude: 110.160872,
				iconPath: '../../../static/location.png'
			}],
			Car_Map: ['warning', ''],
		}
	},
	methods: {
		Borrow_a_car(){
			//获取周边车辆位置
			this.Car_Map = ['warning', '']
		},
		Return_the_car(){
			//获取周边还车点位置
			this.Car_Map =  ['', 'warning']
		},
		scan() {
			uni.scanCode({
				success: (res) => {
					console.log(res);
					this.msg = res.result
				}
			})
		},
		input(){
			uni.navigateTo({
				url: '/pages/inputCode/inputCode'
			})
		},
		close(){

		}
	},
	components: {
		Card_M
	},
	created(){

	},
	onShow(){
		// 获取设备信息
		let res = uni.getSystemInfoSync();
		// 获取视口宽度
		let viewportWidth = res.windowWidth;
		// 计算95%的视口宽度
		let width95Percent = viewportWidth * 0.95;
		this.scan_with = width95Percent + 'px'
		console.log(this.scan_with);
	}
}
</script>

<style scoped>
	.up-bottom {
		z-index: 3;
	}
	.btn_h {
		/* height: 30px; */
		position: absolute;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		width: 200px;
		display: flex;
		justify-content: center;
		background-color: rgba(255, 255, 255);
		/* border: 1px solid #000; */
	    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* 添加阴影效果 */

		border-radius: 20px;
		overflow: hidden;
		z-index: 2;
	}
	.bb {
		/* width: 50px; */
		/* margin-left: 20px; */
	}
	.card_1 {
		padding-left: 4px;
		padding-right: 4px;
		margin-top: 10px;
	}

	.index-scan-main {
		width: calc(v-bind('scan_with'));
		position: relative;
		margin: 0 auto;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.index-main {
		position: relative;
		margin-top: 10px;
	}
	.Scan-Code{
		height: 50px;
		width: 95%;
		position: relative;
		margin: 10px auto;
		background-color: #F7C60D;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}
	.input-Code{
		height: 50px;
		width: 95%;
		position: relative;
		margin: 10px auto;
		background-color: #4bc4f7;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}
	.Scan-Code > image {
		height: 30px;
		width: 30px;
		margin-left: 10px;
	}
	.input-Code > image {
		height: 30px;
		width: 30px;
		margin-left: 10px;
	}
	.test {
		position: relative;
	}
	.noti {
/* 		position: absolute;
		left: 0;
		bottom: 0;
		width: ; */
	}
	.index-wap {
		display: flex;
		/* justify-content: space-evenly; */
		justify-content: center;
		/* margin-top: 5px; */
	}
	.index-wap > text {
		font-size: 10px;
		margin-top: 5px;
		margin-bottom: 10px;
	}
	.Billing-rules, .View-parking-points,.Riding-instructions  {
		border-right: 1px solid #868686;
		padding-right: 10px;
		margin-right: 10px;
	}
	.input {
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		
	}
</style>
